
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title> 生活导购助手 </title>
    <link rel="stylesheet" href="/frozen/css/frozenui.css">
    <script src="/frozen/zepto.min.js"></script>
    <script src="/frozen/handlebars.js"></script>
    <style>
        .li_item{
            display: inline-block;
        }
    </style>
</head>

<body ontouchstart>
<header class="ui-header ui-header-positive ui-border-b">
<!--    <i class="ui-icon-return" onclick="history.back()"></i>-->

    <section id="searchbar">
        <div  class="ui-searchbar-wrap ui-border-b" style="background: rgba(0,0,0,0);">
            <div class="ui-searchbar ui-border-radius">
                <i class="ui-icon-search"></i>
                <div class="ui-searchbar-text">搜索内容</div>
                <div class="ui-searchbar-input">
                    <form action="javascript:search()">
                        <input value="" type="tel" placeholder="搜索内容" autocapitalize="off" id="search_input">
                    </form>
                </div>
                <i class="ui-icon-close"></i>
            </div>
            <button class="ui-searchbar-cancel" style="color: #FFF;">取消</button>
    </section>

<!--    <button class="ui-btn">回首页</button>-->
</header>
<footer class="ui-footer ui-footer-btn">
    <ul class="ui-tiled ui-border-t">
        <li data-href="index.html" class="ui-border-r"><div>
                <a onclick="next_page()" > 加载更多 </a>
            </div></li>
    </ul>
</footer>
<section class="ui-container">
    <!-----列表------->
    <div>
        <ul class="ui-list ui-list-link ui-border-tb" id="container">
            <!--------------->

            <!--------------->
        </ul>
    </div>


</section><!-- /.ui-container-->

<script type="text/template" id="li_item">
    <li class="ui-whitespace  " style="display: inline-block;border-bottom: solid 1px #EEE;" onclick="location.href='{{ad_url}}'">
        <div class="ui-row "  >
            <img src="{{pic}}" alt="" style="width: 100%;">
        </div>
        <div class="ui-row " >
            <span class="ui-col-100" style="font-size: .15rem;"> {{goods_name}}  </span>
        </div>
        <div class="ui-row " >
            <span class="ui-col-50"  style="font-size: .34rem;color: #FF9137"> ￥{{goods_price}}  </span>
        </div>
        <div class="ui-row " style="font-size: .1rem;color: #999;line-height: .5rem;">
            <span class="ui-col ui-col-50"> 产品分类： </span>
            <span class="ui-col ui-col-50">  {{cate}} </span>
        </div>
    </li>
</script>
<script type="text/javascript">
    ///////////////////
    var param = {};
    var template = $("#li_item").html();
    function tpl(template,data){
        var t = Handlebars.compile(template);
        return t(data);
    }
    function append(html){
        $("#container").append(html);
    }
    function request(){
        $.get('/taobao',param,function(d){
            console.log(d);
            if(d.code == 0){
                rendor(d.data.data)
            }
        });
    }
    function rendor(data){
        for(i in data){
            var tmp = data[i];
            append(tpl(template,tmp));
        }
    }
    function init(){
        request();
    }
    function next_page(){
        if(!param.page){
            param.page = 1;
        }
        param.page++;
        request();
    }
    function search(){
        param.search = $("#search_input").val();
        $("#container").empty();
        request();
    }
    (init)($);
    ////////////
    $('.ui-searchbar').tap(function(){
        $('.ui-searchbar-wrap').addClass('focus');
        $('.ui-searchbar-input input').focus();
    });
    $('.ui-searchbar-cancel').tap(function(){
        $('.ui-searchbar-wrap').removeClass('focus');
    });
</script>


</body>
</html>